<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		
		<link rel="stylesheet"  href="../static/css/bootstrap.min.css"/>
		<script src="../static/js/jquery-3.4.1.min.js"></script>
		<script src="../static/js/bootstrap.min.js"></script>
		<style>
		  .fakeimg {
		      height: 200px;
		      background: #aaa;
		  }
		  </style>
		<title></title>
	</head>
	<body>
		<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
			  <span class="navbar-brand" href="#">文件管理</span>
			  <div class="collapse navbar-collapse" id="collapsibleNavbar">
			    <ul class="navbar-nav">
			      <li class="nav-item">
			        <a class="nav-link" href="records">上传记录</a>
			      </li>    
			    </ul>
			  </div>  
		</nav>
		
		
		<div class="container">
			<div style="margin-top:20px;">
			<form id="uploadfile" name="uploadfile" method="post" style="text-align: center" enctype="multipart/form-data">
				<div class="form-group">
				    <div class="col-sm-6" style="display: inline-block">
				        <div class="input-group" style="text-align: center;">
					        <input type="button" id="i-check" value="浏览文件" class="btn btn-primary" onclick="$('#i-file').click();">
					        <input id='location' class="form-control" onclick="$('#i-file').click();">
					        <input type="button" id="upload" value="确认上传" class="btn btn-primary" style="margin-left:30px;">
				        </div>
				    </div>
					<input type="file" name="file" id='i-file'  accept="*.*" onchange="$('#location').val($('#i-file').val());" style="display: none">
				</div>
			</form>
			</div>
			<table class="table table-hover" align="center" id="fileTable">
				 <tr>
					 <th>文件名</th>
					 <th>原始文件名</th>
					 <th>文件大小</th>
					 <th>文件类型</th>
					 <th>文件上传时间</th>
					 <th>操作</th>
				 </tr>
			</table>
		</div>
	</body>
	<script type="text/javascript"> 
		$("#upload").click(function() { 
			var fileInput = $('#i-file').get(0).files[0];
			if(fileInput){
				var uploadfile = new FormData($('#uploadfile')[0]);
			  	$.ajax({ 
				  	type: 'post', 
				  	url: "/file/upload", 
				  	data: uploadfile, 
				  	cache: false, 
				  	processData: false, 
				  	contentType: false, 
				  	success:function(data){
				  		$("td").remove();
				  		if(JSON.stringify(data) == '"上传出现异常"'){
				  			alert(JSON.stringify(data));
				  		}else{
				  			findFileInfo(data)
					  		alert(JSON.stringify(data)+"上传成功！");
				  		}
				  	},error:function(data){
				  		alert(JSON.stringify(data))
				  	}
				  	});
			}else{
				alert("请选择上传文件！");
			}
		  	
	 	});

		function findFileInfo(data){
			    $.ajax({
				    url:'/file/find',
				    type:'get',
				    data:'uuidName='+data+'',
				    success:function(data){
				    	var tr;
					     tr='<td id="uuidName">'+data.uuidName+'</td>'+'<td>'+data.fileName+'</td>'+'<td>'+data.fileSize+'</td>'+'<td>'+data.fileType+'</td>'+'<td>'+data.createDate+'</td>'+'<td><button id="download" class="btn btn-primary btn-sm" onclick="downloadfile()">下载文件</button></td>';
					     $("#fileTable").append('<tr>'+tr+'</tr>')
				   }
				})
		}
		
		function downloadfile() { 
		  	var uuidName = $("#uuidName").text();
		 	// 路径
	        var urlStr1 ="/file/download";
		 	
	        var iframe = $('<iframe id="ifActionResult" name="ifTmp" width="1px" height="1px" style="display: none;"></iframe>');
	        //form提交下载
			var form = $('<form></form>');     
			form.attr('style', 'display:none');      
			form.attr('target', '_blank');      
			form.attr('method', 'get'); //form提交路径      
			form.attr('action', urlStr1)
			form.attr('target', 'ifTmp')
			var input = $('<input type="text" name="uuidName" id="params" />'); // 可以添加一些参数            
			input.attr('value', uuidName);
			form.append(input);
			$(document.body).append(iframe);
			$(document.body).append(form);
			form.submit();
		}
	</script>
</html>
